<template>
  <view class="container">
    <!--mescorll body 无需配置pages.json中的下拉支持-->
    <mescroll-body @init="mescrollInit" :down="{ auto: false }" @down="onDown" @up="onUp" :up="{ toTop: { src: '' } }">
      <!--搜索框-->
      <uni-nav-bar :border="false" fixed :leftWidth="0" rightWidth="70px">
        <view class="input">
          <uni-easyinput
              prefixIcon="search"
              :clearable="true"
              trim="all"
              v-model="queryForm.eqptNo"
              placeholder="搜索：设备编号"
              @confirm="search"
              @clear="search"
          />
        </view>
        <template #right>
          <view class="nav-right" @click="search">
            <uni-icons type="search" size="30"></uni-icons>
            <view class="nav-right-name"> 搜索 </view>
          </view>
        </template>
      </uni-nav-bar>

      <view class="list-view">
        <view class="item" v-for="item in listData">
          <view class="item-top">
            <view class="item-top-info">
              <view class="name"> {{ item.eqptName }} </view>
              <view class="mobile"> {{ item.eqptNo }} </view>
            </view>
          </view>
          <view class="item-bottom"> 最后更新时间：{{ item.updateTime }} </view>
        </view>
      </view>
    </mescroll-body>

  </view>
</template>





<script setup>
import { reactive, ref } from 'vue';
import { onPageScroll, onReachBottom, onShow } from '@dcloudio/uni-app';
import useMescroll from '@/uni_modules/uni-mescroll/hooks/useMescroll';
import { smartSentry } from '@/lib/smart-sentry';
import { eqptApi } from "@/api/business/dobi/eqpt-api";

const defaultForm = {
  eqptNo: '',
  pageNum: 1,
  pageSize: 10,
};

// 查询表单
const queryForm = reactive({ ...defaultForm });

// 列表数据
const listData = ref([]);


function buildQueryParam(pageNum) {
  return Object.assign({}, queryForm, { pageNum:pageNum});
}

async function query(mescroll, isDownFlag, param) {
  try {
    console.log("params",param);
    let res = await eqptApi.pageEqptList(param);

    /*
     * 上拉式加载更多(isDownFlag=false)时，需要将新数据追加到原有数据listData中
     * 下拉刷新(isDownFlag=true)时，需要将新数据赋值给listData
     */
    if (!isDownFlag) {
      listData.value = listData.value.concat(res.result.records);
    } else {
      listData.value = res.result.records;
    }

    mescroll.endBySize(res.result.records.length,res.result.total);
  } catch (e) {
    smartSentry.captureError(e);
    //联网失败, 结束加载
    mescroll.endErr();
  }
}

const { mescrollInit, getMescroll } = useMescroll(onPageScroll, onReachBottom);

/**
 * 搜索
 */
function search() {
  query(getMescroll(), true, buildQueryParam(1));
  uni.pageScrollTo({
    scrollTop: 0,
  });
}

/**
 * 下拉刷新
 */
function onDown(mescroll) {
  queryForm.pageNum = 1;
  query(mescroll, true, buildQueryParam(1));
}

/**
 * 上拉加载更多
 */
function onUp(mescroll) {
  query(mescroll, false, buildQueryParam(mescroll.num));
}

onShow(() => {
  search();
});


</script>

<style lang="scss" scoped>
.container {
  background-color: #f4f4f4;
}
.input {
  width: 100%;
  height: 60rpx;
  background: #f7f8f9;
  border-radius: 4px;
  margin: 8rpx 0;
  display: flex;
  align-items: center;
}

.list-view {
  margin: 20rpx 24rpx;
}
.item {
  box-sizing: border-box;
  width: 700rpx;
  background: #ffffff;
  border-radius: 12rpx;
  box-shadow: 0px 3px 4px 0px rgba(24, 144, 255, 0.06);
  padding: 24rpx 30rpx;
  border-bottom: 1rpx solid #ededed;
  margin-bottom: 24rpx;

  .item-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20rpx;
    .item-top-info {
      display: flex;
      align-items: center;
      .name {
        font-size: 34rpx;
        font-weight: 500;
        color: #444444;
        margin-right: 10rpx;
      }
      .mobile {
        font-size: 32rpx;
        font-weight: bold;
        text-align: left;
        color: #444444;
      }
    }
    .item-top-phone {
      color: #1a9aff;
      font-size: 28rpx;
      display: flex;
      align-items: center;
      image {
        width: 40rpx;
        height: 40rpx;
        margin-left: 4rpx;
      }
    }
  }

  .item-title {
    font-size: 28rpx;
    color: #777777;
    margin-bottom: 24rpx;
  }

  .item-bottom {
    font-size: 28rpx;
    color: #777777;
  }
}
</style>
